<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-08 15:36:26
 * @心得体会: 无
-->

<template>  
<el-scrollbar height="86vh">
    <el-form :model="form" label-width="120px" class="w-1/2 float-left min-w-md">  
      <el-form-item label="病人描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="医生诊断">
        <el-input v-model="form.diagnosis"></el-input>
      </el-form-item>
      <el-form-item label="处理方式" >
        <el-select v-model="form.method" placeholder="请选择">  
          <el-option label="开药，项目检查" value="0"></el-option>  
          <el-option label="自我康复" value="1"></el-option>
          <el-option label="住院" value="2"></el-option> 
        </el-select>  
      </el-form-item>
      <el-form-item label="医生康复描述">
        <el-input v-model="form.doctorDescribe"></el-input>
      </el-form-item>
      <el-form-item label="操作">
        是否用药：<el-select v-model="form.haveDrug" placeholder="是否用药" class="w-20 float-left">  
          <el-option label="是" value="1"></el-option>  
          <el-option label="否" value="0"></el-option>
        </el-select>
        是否检查：<el-select v-model="form.haveProject" placeholder="是否检查" class="w-20 float-left">  
          <el-option label="是" value="1"></el-option>  
          <el-option label="否" value="0"></el-option>
        </el-select>
        是否住院：<el-select v-model="form.haveInhospital" placeholder="是否住院" class="w-20 float-left">  
          <el-option label="是" value="1"></el-option>  
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用药" v-show="form.haveDrug == 1">
        <el-button type="primary" @click="toSelete" style="display: block;">选择</el-button>
        <el-scrollbar height="200px">
          <el-table :data="form.drugs" class="w-96" border highlight-current-row>
            <el-table-column prop="drugId" label="序号"  align="center"></el-table-column>
            <el-table-column prop="drugName" label="药品名称" align="center"></el-table-column>
            <el-table-column prop="number" label="数量" align="center">
              <template #default="scope">
                <el-input v-model="scope.row.number" placeholder="数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="text" @click="deleteDrug(scope.row)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-form-item>
      <el-form-item label="项目" v-show="form.haveProject == 1">
        <el-button type="primary" @click="toSeleteProject" style="display: block;">选择</el-button>
        <el-scrollbar height="200px">
          <el-table :data="form.projects" class="w-96" border highlight-current-row>
            <el-table-column prop="projectInspectionId" label="序号"  align="center"></el-table-column>
            <el-table-column prop="projectName" label="药品名称" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="text" @click="deleteProject(scope.row)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-form-item>
      <el-form-item label="医生建议">
        <el-input v-model="form.advice"></el-input>
      </el-form-item>
      <el-form-item>  
        <el-button type="primary" @click="submitForm">提交</el-button>  
        <el-button @click="resetForm">重置</el-button>  
      </el-form-item>  
    </el-form>  
    <el-form :model="patient" label-width="120px" class="w-1/4 float-right mr-10">
      <el-form-item label="姓名">{{ patient.name }}</el-form-item>
      <el-form-item label="性别">
        <el-tag v-if="patient.sex == 1" >男</el-tag>
        <el-tag v-else >女</el-tag>
      </el-form-item>
      <el-form-item label="联系方式">{{ patient.phonenumber }}</el-form-item>
      <el-form-item label="简介">{{ patient.profile }}</el-form-item>
      <el-form-item label="邮箱">{{ patient.email }}</el-form-item>
    </el-form>
    <el-dialog v-model="drugListVisible" title="添加药品" width="40%">
        <el-input v-model="drugName" class="w-40"></el-input><el-button type="primary" @click="onSearch">搜索</el-button>
        <el-scrollbar height="300px">
          <el-table :data="drugList" style="width: 100%">  
            <el-table-column prop="drugId" label="序列号" width="80px" align="center"></el-table-column>  
            <el-table-column prop="drugName" label="药品名称" align="center"></el-table-column>
            <el-table-column label="操作" width="150px" align="center">
              <template #default="scope">
                <el-button type="text" @click="selectDrug(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <template #footer>
            <el-button @click="drugListVisible = false">关 闭</el-button>
        </template>
    </el-dialog>
    <el-dialog v-model="projectListVisible" title="添加药品" width="40%">
        <el-input v-model="projectName" class="w-40"></el-input><el-button type="primary" @click="onSearchProject">搜索</el-button>
        <el-scrollbar height="300px">
          <el-table :data="projectList" style="width: 100%">  
            <el-table-column prop="projectInspectionId" label="序号" width="80px" align="center"></el-table-column>  
            <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
            <el-table-column label="操作" width="150px" align="center">
              <template #default="scope">
                <el-button type="text" @click="selectProject(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <template #footer>
            <el-button @click="projectListVisible = false">关 闭</el-button>
        </template>
    </el-dialog>
  </el-scrollbar>
  </template>
  
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getDrugs, getProject, myvisit } from '@/api/doctor/visit.js'
import { useRoute } from 'vue-router';
const route = useRoute()
const patient = route.query
console.log(route.query);

let form = reactive({
  patientId: patient.patientId,
  description : "",
  method : "",
  diagnosis : "",
  doctorDescribe : "",
  outcome : "",
  haveDrug : "",
  haveProject : "",
  haveInhospital : "",
  advice : "",
    // 药品添加
  drugs : [],
    // 检验项目
  projects : [],
})
const drugListVisible = ref(false)
const projectListVisible = ref(false)
let drugList = reactive()
let drugName = ref(null)
let projectList = reactive()
let projectName = ref(null)
function submitForm() {  
  console.log('提交表单', form);  
  myvisit(form).then(res =>{
    if(res.code == 200){
      ElMessage.success('提交成功！');
    }
  })
  // 在这里可以添加提交表单的逻辑，如发送到 API  
  // add(form).then(res=>{
  //   if(res.code == 200){
  //     form = reactive({
        
  //     })
  //     ElMessage.success('提交成功！');
  //   }
  // })
  
}
function resetForm() {  
  ElMessage.warning('重置成功！');
  form = reactive({
    patientId: "",
    description : "",
    method : "",
    diagnosis : "",
    doctorDescribe : "",
    outcome : "",
    haveDrug : "",
    haveProject : "",
    haveInhospital : "",
    advice : "",
      // 药品添加
    drugs : [],
      // 检验项目
    projects : [],
  })
}

function toSelete() {
  console.log("选择")
  drugListVisible.value = true
}
function toSeleteProject() {
  console.log("选择")
  projectListVisible.value = true
}
initData()
// 初始化方法
function initData(){
  console.log(drugName.value)
  getDrugs(drugName.value).then(res =>{
        console.log(res)
        // 初始化表格数据
        drugList = reactive(res.data)
  })
  getProject(projectName.value).then(res =>{
    console.log(res)
    // 初始化表格数据
    projectList = reactive(res.data)
  })
}
const selectDrug = (row) => {
  const drug = {
    drugId : row.drugId,
    drugName : row.drugName,
    number : 1,
    unit : row.unit
  }
  let index = form.drugs.findIndex(item => {
    if (item.drugId === row.drugId) {
      return true;
    } else {
      return false;
    }
  });
  if (index == -1) {
    form.drugs.push(drug)
  }
}
const selectProject = (row) => {
  const project = {
    projectInspectionId : row.projectInspectionId,
    projectName : row.projectName,
  }
  let index = form.projects.findIndex(item => {
    if (item.projectInspectionId === row.projectInspectionId) {
      return true;
    } else {
      return false;
    }
  });
  if (index == -1) {
    form.projects.push(project)
  }
}
const deleteDrug = (row) => {
  form.drugs = form.drugs.filter(item => item.drugId != row.drugId)
  if(form.drugs.length == 0){
    form.haveDrug = "0"
  }
}
const deleteProject = (row) => {
  form.projects = form.projects.filter(item => item.projectInspectionId != row.projectInspectionId)
  if(form.projects.length == 0){
    form.haveProject = "0"
  }
}
</script>

<style scoped>

</style>